Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

KeyboardShortcuts: Update delete shortcut to use shift + Backspace #68164

Merged

Conversation

yogeshbhutkar
Copy link
Contributor

@yogeshbhutkar yogeshbhutkar commented Dec 20, 2024

Fixes: #68139

What, Why & How?

Previously, the shortcut to remove the selected blocks was Control Option Z on Mac, or Control Alt Z on Windows.

This PR introduces the usage of shift + Backspace for performing the same.

Testing Instructions

  1. Create a block.
  2. Press the key combination SHIFT + Backspace and observe the removal of the block.

Screencast

Screen.Recording.2024-12-24.at.3.17.15.PM.mov

Screenshot

Screenshot 2024-12-24 at 3 15 55 PM

@yogeshbhutkar yogeshbhutkar marked this pull request as ready for review December 20, 2024 08:21
Copy link

github-actions bot commented Dec 20, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yogeshbhutkar <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: jarekmorawski <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: talldan <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@yogeshbhutkar
Copy link
Contributor Author

Looks like some Playwright tests are failing, will be adding a commit to fix the failing test cases.

@yogeshbhutkar yogeshbhutkar changed the title KeyboardShortcuts: Update delete shortcut to use Shift + Delete and add Backspace alias KeyboardShortcuts: Update delete shortcut to use primaryShift + Backspace with primaryShift + Delete as alias Dec 23, 2024
@jasmussen
Copy link
Contributor

Took the latest iteration for a spin. This feel very solid for me:

delete-block.mp4

I'd encourage others to give this a spin, to check compatibility across platforms, etc, but this PR feels more intuitive than trunk, for the moment. Thank you!

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... labels Dec 24, 2024
@t-hamano
Copy link
Contributor

On Windows, the shortcut looks like this:

image

One thing I noticed is that depending on the cursor position, the process to merge blocks can be prioritized. Below are two scenarios:

  • Execute ctrl+shift+backspaceat the beginning of the text
  • Execute ctrl+shift+del at the end of the text
1c8b39edda7969ed70609cccc5bdeb52.mp4

Can these be reproduced on a Mac? If the backspace and del keys don't work consistently, we might want to consider the d key.

@yogeshbhutkar
Copy link
Contributor Author

yogeshbhutkar commented Dec 24, 2024

Can these be reproduced on a Mac?

Yes, @t-hamano, you are right about that. And it's the same for Mac. I believed it was intended and that backspace and del should be aliased together. However, it's to be noted that the majority of the users would intuitively understand this behavior, and backspace and del are very intuitive ways of making a deletion. So, general users might just prefer it.

we might want to consider the d key.

ctrl+alt+d and ctrl+shift+alt+d seem to be the only shortcuts available with d. The second one is too big, leaving just ctrl+alt+d behind.

What are your thoughts on this? Do we proceed with implementing ctrl+alt+d?

Mac OS: cmd + option + d
Windows: ctrl + alt + d

Does this sound good?

@t-hamano
Copy link
Contributor

I came up with a different solution: merging blocks using del or Backspace is done here, so when command/ctrl + shift + del/backspace is executed, aborts the process:

diff --git a/packages/block-editor/src/components/rich-text/event-listeners/delete.js b/packages/block-editor/src/components/rich-text/event-listeners/delete.js
index ae3fd733bb..12512626d9 100644
--- a/packages/block-editor/src/components/rich-text/event-listeners/delete.js
+++ b/packages/block-editor/src/components/rich-text/event-listeners/delete.js
@@ -6,7 +6,7 @@ import { isCollapsed, isEmpty } from '@wordpress/rich-text';
 
 export default ( props ) => ( element ) => {
        function onKeyDown( event ) {
-               const { keyCode } = event;
+               const { keyCode, ctrlKey, shiftKey } = event;
 
                if ( event.defaultPrevented ) {
                        return;
@@ -30,6 +30,11 @@ export default ( props ) => ( element ) => {
                                return;
                        }
 
+                       // Exclude command+shift+del/delete as they are shortcuts for deleting blocks.
+                       if ( event.ctrlKey && event.shiftKey ) {
+                               return;
+                       }
+
                        if ( onMerge ) {
                                onMerge( ! isReverse );
                        }

@yogeshbhutkar yogeshbhutkar changed the title KeyboardShortcuts: Update delete shortcut to use primaryShift + Backspace with primaryShift + Delete as alias KeyboardShortcuts: Update delete shortcut to use primaryShift + Backspace Dec 24, 2024
@yogeshbhutkar yogeshbhutkar changed the title KeyboardShortcuts: Update delete shortcut to use primaryShift + Backspace KeyboardShortcuts: Update delete shortcut to use shift + Backspace Dec 24, 2024
@yogeshbhutkar
Copy link
Contributor Author

Hi @t-hamano, thanks for suggesting this approach. I've incorporated it in the latest commit. Also, as per this comment, I've implemented shift+backspace as the standard shortcut for deleting the blocks.

I've updated the PR Title, Description, and Screencasts/ Screenshots used appropriately to reflect the same.

@t-hamano t-hamano self-requested a review December 25, 2024 05:34
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Everything seems to work correctly on Windows.

  • At the beginning of the text:
    • ✅ Press backspace key: The blocks are merged (RichText shortcut)
    • ✅ Press shift+backspace key: The block is removed (Shortcut implemented in this PR)
    • ✅ Press shift+del key: The block is moved to the clipboard (Chrome shortcut)
  • At the end of the text:
    • ✅ Press del key: The blocks are merged (RichText shortcut)
    • ✅ Press shift+backspace key: The block is removed (Shortcut implemented in this PR)
    • ✅ Press shift+del key: The block is moved to the clipboard (Chrome shortcut)

@talldan @jasmussen Just to be sure, could you check if everything works as expected on Mac as well?

@jasmussen jasmussen self-requested a review December 25, 2024 08:56
Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Confirmed, this works well on a Mac. It seems more ergonomic, intuitive, predictable, and works well across laptop and extended keyboards. Nice work!

@yogeshbhutkar
Copy link
Contributor Author

Thank you, @t-hamano and @jasmussen, for taking the time to test the PR ✨!

@t-hamano t-hamano merged commit 1fad00a into WordPress:trunk Dec 26, 2024
65 checks passed
@github-actions github-actions bot added this to the Gutenberg 20.0 milestone Dec 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Delete block shortcut: update to be more intuitive and farther from "undo"
3 participants